const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const BASE = require('./config/index.js')
const NODE_ENV = process.env.NODE_ENV
const bablePlugin = [
    [
        'import',
        {
            libraryName: 'ant-design-vue',
            libraryDirectory: 'es'
        }
    ],
    [
        'component',
        {
            libraryName: 'element-ui',
            styleLibraryName: 'theme-chalk'
        }
    ],
    ['@babel/plugin-proposal-private-property-in-object', { loose: true }]
]

if (NODE_ENV === 'production') {
    bablePlugin.push('transform-remove-console')
}

module.exports = {
    telemetry: false,
    env: {
        TZY_SERVER_ENV: process.env.TZY_SERVER_ENV
    },
    server: {
        port: 80, // default: 3000
        host: 'localhost' // default: localhost,
    },
    head: {
        title: '乡村资源管理交易平台',
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            {
                hid: 'description',
                name: 'description',
                content: process.env.npm_package_description || ''
            }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
            { rel: 'stylesheet', href: '/css/reset.css' }
        ],
        script: [
            {
                src: '/js/flexible.js',
                ssr: false,
                type: 'text/javascript',
                charset: 'utf-8'
            }
        ]
    },
    loading: { color: '#fff' },
    css: ['@/assets/less/ant-ui.less', '@/assets/less/element-ui.less'],
    plugins: [
        { src: '@/plugins/axios', ssr: true },
        { src: '@/plugins/router', ssr: false },
        { src: '@/plugins/httpServer', ssr: true },
        { src: '@/plugins/ant-ui' },
        { src: '@/plugins/element-ui' },
        { src: '@/plugins/utils', ssr: true },
        { src: '@/plugins/icons', ssr: true },
        { src: '@/plugins/tools', ssr: true },
        { src: '@/plugins/vuex-persist', ssr: false },
        { src: '@/plugins/vue-amap', ssr: false },
        { src: '@/plugins/echarts', ssr: false },
        { src: '@/plugins/vue-components' },
        { src: '@/plugins/cropper', ssr: false }
    ],
    router: {
        // middleware: 'redirect'
    },
    buildModules: ['@nuxtjs/eslint-module'],
    modules: ['@nuxtjs/axios', '@nuxtjs/style-resources', '@nuxtjs/proxy', 'cookie-universal-nuxt'],
    styleResources: {
        less: ['@/assets/less/theme-basic.less']
    },
    axios: { proxy: true },
    proxy: {
        '/api': {
            target: BASE[process.env.TZY_SERVER_ENV].baseURL,
            pathRewrite: {
                '^/api': '/'
            }
        }
    },
    build: {
        vendor: ['vue-cropper'],
        transpile: [/ant-design-vue/],
        extractCSS: process.env.NODE_ENV === 'production',
        loaders: {
            less: {
                javascriptEnabled: true
            }
        },
        babel: {
            plugins: bablePlugin
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    styles: {
                        name: 'styles',
                        test: /\.(css|vue|less)$/,
                        chunks: 'all',
                        enforce: true
                    }
                }
            }
        },
        productionGzip: true,
        productionSourceMap: false,
        configureWebpack: (config) => {
            if (NODE_ENV === 'production') {
                config.plugins.push(
                    new CompressionWebpackPlugin({
                        algorithm: 'gzip',
                        test: /\.(js|css|html)$/,
                        threshold: 10240,
                        minRatio: 0.8
                    })
                )
                config.externals = {
                    vue: 'Vue',
                    'vue-router': 'VueRouter',
                    axios: 'axios'
                }
            }
        },
        productionGzipExtensions: ['js', 'css', 'svg'],
        filenames: {
            // css 和 js  img 打包时指定文件夹
            app: ({ isDev }) => (isDev ? '[name].js' : `[name].${new Date().getTime()}.js`),
            chunk: ({ isDev }) => (isDev ? '[name].js' : `[name].${new Date().getTime()}.js`),
            css: ({ isDev }) => (isDev ? '[name].css' : `[name].${new Date().getTime()}.css`),
            img: ({ isDev }) => (isDev ? '[path][name].[ext]' : '[path][name].[ext]'),
            font: ({ isDev }) => (isDev ? '[path][name].[ext]' : '[path][name].[ext]'),
            video: ({ isDev }) => (isDev ? '[path][name].[ext]' : '[path][name].[ext]')
        },
        extend (config, ctx) {
            if (ctx.isDev && ctx.isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                })
            }

            if (ctx.isClient) {
                if (NODE_ENV === 'development') {
                    config.devtool = 'cheap-module-eval-source-map'
                } else {
                    config.devtool = 'hidden-source-map'
                }
            }

            const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
            svgRule.exclude = [path.resolve(__dirname, 'assets/icons/svg')]
            // Includes /icons/svg for svg-sprite-loader
            config.module.rules.push({
                test: /\.svg$/,
                include: [path.resolve(__dirname, 'assets/icons/svg')],
                loader: 'svg-sprite-loader',
                options: {
                    symbolId: 'icon-[name]'
                }
            })
        }
    },
    render: {
        resourceHints: false
    },
    watchers: {
        webpack: {
            aggregateTimeout: 300,
            poll: 1000,
            ignored: /node_modules/
        }
    }
}
